<template>
	<view>
		<view class="bg-top">
			<view class="top-text">交通电警设备运维管理</view>
			<view class="top-card">
				<text>崇左市公安局交警</text>
			</view>
		</view>
		<view class="big-card">
			<view class="lactive">
				<text>
					商机明细
				</text>
			</view>
			<view class="card-right">
				<text>动态作为</text>
			</view>
		</view>
		<view class="xinxi">
			<view class="xinxi-top"><text>基本信息</text></view>
		</view>
		<textmod textLeft="预计时间" textRight="2022-12-02"></textmod>
		<textmod textLeft="项目详情" textRight="软件定制"></textmod>
		<textmod textLeft="预算金额" textRight="700,000.00"></textmod>
		<textmod textLeft="联系人" textRight="金主任"></textmod>
		<textmod textLeft="联系电话" textRight="13132682006"></textmod>
		<view class="xinxi">
			<view class="xinxi-top"><text>市场信息</text></view>
		</view>
		<textmod textLeft="市场主管" textRight="邹仁淳"></textmod>
		<textmod textLeft="市场阶段" textRight="方案编制"></textmod>
		<textmod textLeft="成功率" textRight="20%"></textmod>
		<view class="xinxi">
			<view class="xinxi-top"><text>奖励信息</text></view>
		</view>
		<textmod textLeft="个人奖" textRight="0%"></textmod>
		<textmod textLeft="团队奖" textRight="0%"></textmod>
		<textmod textLeft="录入时间" textRight="2021-08-13"></textmod>
		<view class="bg-bottom">
			<view class="bg-hr"></view>
			<view class="btn-box">
				<view class="icon-bz">
					<view class="iconfont icon-xiugai"></view>
					<text>修改商机</text>
				</view>
				<view class="icon-bz">
					<view class="iconfont icon-baogao"></view>
					<text>市场周报</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import textmod from "@/components/common/textmod.vue"
	export default {
		onLoad:function(option){
			this.shuju= option.deta
		},
		components:{
			textmod
		},
		data() {
			return {
				shuju:{}
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.bg-top{
		font-size: 40rpx;
		background-color: #3974F6;
		width: 100%;
		height: 130rpx;
		color: #ffffff;
		padding-top: 20rpx;
	}
	.top-text{
		display: flex;
		justify-content: center;
	}
	.top-card{
		width: 100%;
		height: 50rpx;
		font-size: 30rpx;
		background-color: #0D48CA;
		margin-top: 10rpx;
		
	}
	.top-card text{
		float: right;
		margin-right: 20rpx;
	}
	.big-card{
		display: flex;
		background-color: cornflowerblue;
	}
	.card-left{
		width: 50%;
		height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		color: #6C6F7D;
		border-radius: 10rpx 0 0 0;
		background-color: aliceblue;
		padding: 10rpx 0;
	}
	.lactive{
		width: 50%;
		height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		color: #698EF7;
		border-radius: 10rpx 0 0 0;
		background-color: #ffffff;
		padding: 10rpx 0;
	}
	.card-right{
		width: 50%;
		height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius:  0 10rpx 0 0;
		color: #6C6F7D;
		background-color: aliceblue;
		padding: 10rpx 0;
	}
	.ractive{
		width: 50%;
		height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		color: #698EF7;
		border-radius:  0 10rpx 0 0;
		background-color: #ffffff;
		padding: 10rpx 0;
	}
	.xinxi{
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: center;
	}
	.xinxi-top{
		width: 90%;
		height: 40rpx;
		border-radius: 10rpx;
		margin: 10rpx 0;
		color: #698EF7;
		background-color: #F2F6FF;
	}
	.xinxi-top text{
		padding-left: 20rpx;
	}
	.bg-bottom{
		width: 100%;
		height: 50rpx;
		position: absolute;
		top: 1120rpx;
		left: 0;
	}
	.bg-hr{
		width: 100%;
		height: 4rpx;
		background-color: #ECECEC;
	}
	.btn-box{
		display: flex;
	}
	.icon-bz{
		width: 50%;
		height: 80rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		color: #698EF7;
		flex-direction: column;
	}
</style>
